<template>
    <div class="pie-chart">
        <div class="title">
            <span>项目介绍</span>
            <img src="../../../assets/show-title-bg.png">
        </div>
        <span>汾阳至石楼高速公路工程</span>
        <div class="pie-chart-data">
            <div :style="{ zoom: zoom }" id="data" class="pie-chart-data-view"></div>
            <img src="../../../assets/chart-data-bg.png">
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            zoom: 1,
            option: {},
            myChart: {}
        }
    },
    mounted() {
        this.pie_chart()

    },
    created() {
        const _this = this
        _this.zoom = (1 / _this.pxzoom().zoom)
    },
    methods: {
        pie_chart() {
            this.$charts.pie("data", []);
        }
    },
}
</script>

<style lang="scss" scoped>
.pie-chart {
    width: 100%;
    height: 28%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;

    >.title {
        width: 218px;
        height: 43px;
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 60px;
        box-sizing: border-box;

        >img {
            width: 100%;
            height: 43px;
            position: absolute;
            left: 0;
            top: 0;
        }

        >span {
            position: relative;
            color: #fff;
            font-size: 18px;
        }
    }

    >span {
        display: flex;
        align-items: flex-end;
        width: 244px;
        height: 50px;
        font-size: 22px;
        margin-left: 30px;
        margin-top: -7px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #FFFFFF;
        text-shadow: 0px 0px 15px #009CAF;
        -webkit-text-stroke: 1px #001067;
    }

    >.pie-chart-data {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: flex-end;

        .pie-chart-data-view {
            width: 100%;
            height: 100%;
            z-index: 99;
            display: flex;
            align-items: flex-end;

        }

        >img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
</style>
